import React from 'react'
import { MediaBox, MediaBoxHeader, MediaBoxBody, MediaBoxTitle } from 'react-weui'
import moment from 'moment'

import Text from './text'
import Location from './location'
import Image from './image'
import Emoticon from './emoticon'
import Recommend from './recommend'
import Share from './share'

const parse = (arg) => {
  try {
    return JSON.parse(arg)
  } catch (e) {}
}

export default class MessageItem extends React.Component {

  constructor(props) {
    super(props)

    let supportedDisplay = this.props.message.supportedDisplay
    let content = this.props.message.content
    let parsedContent = parse(this.props.message.content)

    if (this.props.message.type === 'SYSTEM') {
      this.messageContent = <p className="media-box-chat__desc--center">{ content }</p>
    }

    if (supportedDisplay === 'text') {
      if (parsedContent && parsedContent.hasOwnProperty('mapUrl')) {
        this.messageContent = <Location location={ parsedContent } />
      } else {
        this.messageContent = <Text text={ content } />
      }
    } else if (supportedDisplay === 'image') {
      this.messageContent = <Image src={ content } />
    } else if (supportedDisplay === 'emoticon') {
      this.messageContent = <Emoticon url={ content } />
    } else if (supportedDisplay === 'recommend-info') {
      this.messageContent = <Recommend recommend={ parsedContent } />
    } else if (supportedDisplay === 'share') {
      this.messageContent = <Share share={ parsedContent } />
    } else if (supportedDisplay === 'unsupported') {
      this.messageContent = <p>[Unsupported message: { this.props.message.type }]</p>
    }
  }

  render() {
    let message = this.props.message

    return(
      <div className="weui-media-box weui-media-box_appmsg media-box-chat">
        { message.type !== 'SYSTEM' &&
          <MediaBoxHeader className="media-box-chat__hd">
            <img src={ message.groupMember ?
              message.groupMember.headImgUrl : message.sender.headImgUrl }
              className="weui-media-box__thumb" />
          </MediaBoxHeader>
        }
        <MediaBoxBody>
          { message.type !== 'SYSTEM' &&
            <MediaBoxTitle className="media-box-chat__title">
              <span className="media-box-chat__title-inner">
                { message.groupMemberName ? message.groupMemberName : message.senderName }
              </span>
              <span className="media-box-chat__title-right">
                { moment(message.messageTime).format('YYYY-M-D H:m') }
              </span>
            </MediaBoxTitle>
          }
          { message.type === 'SYSTEM' ? (
            <div className="weui-media-box__desc media-box-chat__desc media-box-chat__desc--center">
              { this.messageContent }
            </div>
          ) : (
            <div className="weui-media-box__desc media-box-chat__desc">
              { this.messageContent }
            </div>
          )}
        </MediaBoxBody>
      </div>
    )
  }
}